/* ------------------------------------------------------------------------------------
--  RESET
------------------------------------------------------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img{
	max-width:100%;
}
iframe, img, object{
	float:left;
}
::selection{
	background:#ddd;
}
::-moz-selection{
	background:#ddd;
}
/* ------------------------------------------------------------------------------------
--  GENERAL + ANCHORS
------------------------------------------------------------------------------------ */
html{
	width:100%;
	height:100%;
}
body{ 
    width:100%;
    height:100%;
	margin: 0; 
	padding: 0;
    font-size:100%;
	font-family:'Helvetica', Arial, FreeSans, sans-serif;
	background:#f0f0f0;
}
a{
	text-decoration:none;
	outline:none;
	color:#44808a;
}
a:hover{
	color:#1693A5;
}
img, object, iframe, figure, video{
	float:left;
} 
#navbar{
	display:none;
}
/* ------------------------------------------------------------------------------------
--  TYPOGRAPHY
------------------------------------------------------------------------------------ */
p{
	line-height:1.5em;
	font-size:1.05em;	
	margin-bottom:40px;
	color: #808080;
}
/* ------------------------------------------------------------------------------------
--  GENERAL 
------------------------------------------------------------------------------------ */
#wrapper{
	background:#f0f0f0;
	float:left;
	width:96%;
	margin:2%;
	position:relative;
}
.whiteline{
	float:left;
	width:100%;
	height:1px;
	background:#fff;
	margin-bottom:40px;
}
.whiteline2{
	float:left;
	width:100%;
	height:1px;
	background:#fff;
	margin-bottom:20px;
}
.greyline{
	float:left;
	width:100%;
	height:1px;
	background:#ddd;
}
.greyline2{
	float:left;
	width:100%;
	height:1px;
	background:rgba(221,221,221,0.7);
}
#maincontent{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	background:rgba(0,0,0,0.4);
	width:100%;
}
/* ------------------------------------------------------------------------------------
--  TOP (image background)
------------------------------------------------------------------------------------ */
figure#bg-photo{
	background:black;
	width:100%;
	float:left;
}
/* ------------------------------------------------------------------------------------
--  TOP text over full-screen image
------------------------------------------------------------------------------------ */
#top{
	float:left;
	width:100%;	
	margin:26% 0 3% 0;
}
#top hgroup{
	float:left;
	margin:0 0 0 3%;
}
#top h1{
	color:#f0f0f0;
	font-size:7em;
    font-family: 'UnifrakturMaguntia', cursive;
    -webkit-text-stroke: 1px #eee;
    -moz-text-stroke: 1px #eee;
    -o-text-stroke: 1px #eee;
    -ms-text-stroke: 1px #eee;
    text-shadow:
               0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

}
#top h2{
	color:#fff;
	font-size:1.3em;
	float:right;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
}
/* ------------------------------------------------------------------------------------
--  HEADER
------------------------------------------------------------------------------------ */
header{
	float:left;
	width:100%;
	padding:40px 0 0 0;
	background:#f0f0f0;
	clear:both;
}
#logo{
	float:left;
	width:10%;
	margin:0 4% 0 3%;
}
nav{
	float:right;
	width:80%;
	margin:0 3% 0 0;
}
nav ul{
	float:left;
	width:100%;
	list-style:none;
}
nav li{
	float:left;
	width:16%;
	margin-right:4%;
}
nav li:last-child{
	margin-right:0;
}
nav li a{
	padding-top:10px;
	border-top:1px solid #ddd;
	width:100%;
	display:block;	
	color:#292C37;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
    opacity: 0.6;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
nav li a:hover{
	border-top:1px solid #1693A5;
	opacity:1;
}
nav li.selected a{
	border-top:2px solid #1693A5;
}
nav li.selected a:hover{
	border-top:2px solid #1693A5;
}	
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT
------------------------------------------------------------------------------------ */
.midbox{
	float:left;
	width:94.2%;
    background:#f0f0f0;
    padding:3% 3% 0 3%;
	clear:both;
	border-right:4px solid #f0f0f0;
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: left side
------------------------------------------------------------------------------------ */
.left{
	float:left;
    width:64%;
}
/* ------------------------------------------------------------------------------------
--  post
------------------------------------------------------------------------------------ */
.post{
	float:left;
    width:92%;/*total 100%*/
	padding:4%;
	margin-bottom:80px;
	background:#fbfbfb;
	box-shadow:0 2px 2px #ddd;
}
h2.date-header{
    float:right;
	background:url(images/pat.png) rgba(221,221,221,0.3);
	background-repeat:repeat;
	border:1px solid rgba(255,255,255,0.8);
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
	padding:10px;
	margin:0 0 20px 0;
}
h2.date-header span{
	text-transform:uppercase;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	color:#fff;
	text-shadow:none;
	font-size:0.7em;
	font-weight:700;	
	background: #6cabb5;
	border:1px solid #fff;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
	padding:10px;
	float:left;
}
h3.post-title{
	float:left;
	width:100%;
	font-size:2em;	
	line-height:1.4em;
	color:#808080;
    text-transform:capitalize;
	line-height:1.5em;
	text-shadow:0 1px 1px #fff;	
	padding-bottom:2%;
	border-bottom:1px solid rgba(221,221,221,0.7);
}
h3.post-title a{
	color:#808080;
    text-shadow: 0 1px 1px #fff;/*post title anchor*/
}
h3.post-title a:hover{
	color:#1693A5;
}
/* ------------------------------------------------------------------------------------
--  POST: bottom
------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------
--  post: read more button
------------------------------------------------------------------------------------ */
.jump-link{
	float:left;
	padding:10px;
	background:#6db5bf;
	color:#f0f0f0;
	font-weight:700;
	border:2px solid #fff; 
	box-shadow:0 1px 1px rgba(221,221,221,0.8);
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	text-transform:lowercase;
}
.jump-link:hover{
	background:#3c8a95;
	color:#fff;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
.jump-link a{
	color:#f0f0f0;	
}
/* ------------------------------------------------------------------------------------
--  post: social share buttons
------------------------------------------------------------------------------------ */
.horizontal-social-buttons{
	float:left;
	width:100%;
	margin:0 0 40px 0;
	padding:40px 0 0 0;
	border-top:1px solid rgba(221,221,221,0.6);
}
/* ------------------------------------------------------------------------------------
--  post: post footer: posted at, posted by, number of comments etc
------------------------------------------------------------------------------------ */
.post-footer{
	float:left;
	width:96%;
	padding:2% 2% 0 2%;
	background:rgba(0,0,0,0.01);/*number of comments, author, label etc*/
}
.post-author, .post-timestamp{
    font-size:0.9em;/*posted by, posted at*/
    float:left;
    width:100%;
	padding-bottom:20px;
    border-bottom:1px solid #ddd;
}
a.comment-link{
    float:left;/*number of comments*/
    width:96%;
    margin:0;
    padding:0 0 16px 4%;
    border-bottom:1px solid #ddd;
    background:url(images/comment.png);
    background-repeat:no-repeat;
    background-position:0 4px;
    height:24px;
    line-height:24px;
    font-size:0.9em;
    text-transform:lowercase;
}
a.comment-link:hover{
    color:#808080;
}
.post-labels{
    font-size:0.9em;
    float:left;
    width:100%;
    padding-bottom:20px;
    margin:0;
    border-bottom:1px solid #ddd;
}
.post-labels a{
	margin:0 0 0 4px;
	font-weight:700;
    color:#808080;
}	
.post-labels a:hover{	
	color: #1693A5;		
}
/* ------------------------------------------------------------------------------------
--  post: disqus comments widget (#HTML3)
------------------------------------------------------------------------------------ */
#disqus_thread{
	float:left;
    width:92%;/*total 100%*/
	padding:4%;
	margin-bottom:80px;
	background:#fbfbfb;
	box-shadow:0 2px 2px #ddd;
}
/* ------------------------------------------------------------------------------------
--  post: previous / next buttons
------------------------------------------------------------------------------------ */
.blog-pager{
	float:left;
	width:100%;
}
#blog-pager-menu{
	float:right;
    margin:80px 0;
    padding:0;
}
#blog-pager-menu a{
	display:inline;
	float:left;
	padding:10px;
	background:#6db5bf;
	color:#f0f0f0;
	font-weight:700;
	border:2px solid #fff; 
	box-shadow:0 1px 1px rgba(221,221,221,0.8);
	text-transform:lowercase;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
}
#blog-pager-menu a:hover{
	background:#3c8a95;
	color:#fff;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
a.home-link{
	display:none;
}
.blog-mobile-link-custom{
	float:left;
	width:100%;
	margin-top:2%;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE
------------------------------------------------------------------------------------ */
article{
	float:left;
	width:100%;
}
section{
	float:left;
	width:100%;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE: preface
------------------------------------------------------------------------------------ */
.start{
	float:left;
	width:100%;
	margin-bottom:40px;	
}
.start em{
	font-weight:700;
	line-height:1.5em;
	font-size:1.05em;	
	color: #808080;
	overflow:hidden;
	display:block;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE: figure image
------------------------------------------------------------------------------------ */
.left figure{
	width:100%;
	border-top:1px solid rgba(221,221,221,0.7);
	border-right:2px solid rgba(221,221,221,0.7);
	border-bottom:1px solid rgba(221,221,221,0.7);
	border-left:1px solid rgba(221,221,221,0.7);
	background:#f0f0f0;
	margin-bottom:40px;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
}
.figure-inner{
	float:left;
	border:1px solid #fff;
	padding:2%;
	width:96%;
}
.left img{
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2); 
}
.pic{
	width:100%;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE: tooltip
------------------------------------------------------------------------------------ */
a.tooltip{
    outline: none;
    text-decoration:none;
    display:inline-block;
    position:relative;
}
a.tooltip span{
    pointer-events: none;
    padding: 20px 0;
    text-align: center;
    position: absolute;
    opacity: 0;
    box-shadow: 0 6px 10px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background:rgba(0,0,0,0.6);
	color:#1693A5;
	font-weight:700;
	font-size:0.9em;
	width:50%;
	left:0;
    bottom: 100px;
}
a.tooltip:hover span{
    opacity: 0.95;
    bottom:0;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE: buttons
------------------------------------------------------------------------------------ */
.watch-wrap{
	float:right;
	background:#f0f0f0;
    border-radius:4px;
	margin:0 0 0 40px;
	border:1px solid rgba(221,221,221,0.7);
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
}
.watch{
    float:left;
	background:#6db5bf;
    height:40px;
    display:inline-block;
    border:1px solid #fff;
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.1);
    border-radius:4px;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    -ms-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.direct{
	display:none;
}
.watch-inner{
	float:left;
	margin:10px;
	position:relative;
	clear:both;
	overflow:hidden;
}
.act{
    float:right;	
    margin:0 0 0 60px;
	line-height:20px;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	text-transform:uppercase;
	font-weight:700;
	color:#fff;
	font-size:0.8em;
	cursor:pointer;
}
.watch img{
    position:absolute;
    left:0;
    top:0;
    border:none;
    box-shadow:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.watch .watch-slide-text{
    position:absolute;
    font-size:1.1em;
    top:0;
    left:0;
    width:50px;
    color:#fff;
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    opacity:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.watch:hover{
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.3);
}
.watch:hover img{
    opacity:0;
}
.watch:hover .watch-slide-text{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
.watch:active{
    position:relative;
    top:1px;
	background:#3c8a95;
    box-shadow:1px 1px 1px rgba(0,0,0,0.2) inset;
    border-color:#fff;
}
/*download button is identical to watch button (see above .watch styles)*/
.download{
	margin:20px 0 40px 0;
}
/* ------------------------------------------------------------------------------------
--  POST ARTICLE: various styles
------------------------------------------------------------------------------------ */
aside.quotes{
	float:right;
	width:50%;
	margin:0 0 4% 4%;
	border-top:1px solid rgba(221,221,221,0.7);
	border-right:2px solid rgba(221,221,221,0.7);
	border-bottom:1px solid rgba(221,221,221,0.7);
	border-left:1px solid rgba(221,221,221,0.7);
	background:#f0f0f0;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
}
blockquote{
	padding:6%;
	border:1px solid #fff;
	float:left;
	width:88%;
	margin:0;
	line-height:1.6em;
	color:#3c8a95;
	font-style:italic;
	font-family:'Georgia', serif;
	text-shadow:0 1px 1px #fff;
}
article section h2{
	margin-bottom:4%;
	color:#555;
	text-shadow:0 1px 1px #fff;
	line-height:1.5em;
	font-size:1.6em;
	text-transform:capitalize;	
}
article section ul{
	float:left;
	width:100%;
	list-style:none;	
}
article section li{
	float:left;
	width:100%;
	border-bottom:1px solid #fff;
	margin-bottom:20px;
}
article section li.last{
	margin-bottom:0;
}
article section h3{
	padding-bottom:20px;
}
.name{
	float:right;
    color:#808080;
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar)
------------------------------------------------------------------------------------ */
.right{
	float:right;
	width:33%;
	margin:0 0 0 3%;
}
.sidebar{
	float:left;
	width:100%;
}
.right h1{
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	text-align:center;
	color:#808080;
	text-shadow:0 1px 1px #fff;
	text-transform:uppercase;	
	font-weight:700;
	line-height:1.4em;
	width:100%;
	background:url(images/pat.png) rgba(221,221,221,0.1);
	background-repeat:repeat;
	border-radius:4px;
	margin-bottom:30px;
}
.right h2{
	display:block;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	text-align:center;
	color:#808080;
	text-shadow:0 1px 1px #fff;
	text-transform:uppercase;	
	font-weight:700;
	line-height:1.4em;
	width:100%;
	background:url(images/pat.png) rgba(221,221,221,0.1);
	background-repeat:repeat;
	border-radius:4px;
	margin-bottom:30px;	
}
.heading{
	background:#f0f0f0;
	padding:2%;
}
.dot{
	color: #58868d;	
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar): latest posts widget #Feed1 +
popular posts widget #PopularPosts1
------------------------------------------------------------------------------------ */
#Feed1, #PopularPosts1{
	float:left;
	width:100%;
	margin-bottom:40px;
	background:#f0f0f0;
}
#Feed1 ul, #PopularPosts1 ul{
	float:left;
	width:100%;	
	list-style:none;
}
#Feed1 li, #PopularPosts1 li{
	float:left;
	width:100%;
	border-bottom:1px solid #fff;
	margin:0 0 20px 0;
	padding:0 0;
}
#Feed1 li a, #PopularPosts1 li a{
	display:block;
	font-size:1.1em;
	color:#bebebe;
	padding-bottom:20px;	
	border-bottom:1px solid #ddd;
}
#Feed1 li a:hover, #PopularPosts1 li a:hover{
	color:#1693A5;
}

/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar): text+badge widget #HTML4
------------------------------------------------------------------------------------ */
.text{
	float:left;
	width:100%;
	overflow:hidden;
	clear:both;
	margin-bottom:60px;
}
.text figure{
	float:left;
	width:25%;
}
.text-wrap{
	float:left;
	width:70.5%;
	position: relative;
	margin:0 0 40px 4.5%;
	line-height:2em;
}
.text-phrase{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.text-phrase span{
	color: #808080;
	font-size: 1.4em;
	font-weight: normal;
}
.words{
	float:left;
	display: inline-block;
	font-size:1.2em;
	line-height:2.6em;
	margin-top:-0.4em;
}
.words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #6b969d;
	-webkit-animation: rotateWord 18s linear infinite 0s;
	-moz-animation: rotateWord 18s linear infinite 0s;
	-o-animation: rotateWord 18s linear infinite 0s;
	-ms-animation: rotateWord 18s linear infinite 0s;
	animation: rotateWord 18s linear infinite 0s;
}
.words span:nth-child(2){ 
    -webkit-animation-delay: 3s; 
	-moz-animation-delay: 3s; 
	-o-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
	color: #58868d;
}
.words span:nth-child(3){ 
    -webkit-animation-delay: 6s; 
	-moz-animation-delay: 6s; 
	-o-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #4a7e87;	
}
.words span:nth-child(4){ 
    -webkit-animation-delay: 9s;
	-moz-animation-delay: 9s; 
	-o-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
	color: #396f78;
}
.words span:nth-child(5){ 
    -webkit-animation-delay: 12s; 
	-moz-animation-delay: 12s; 
	-o-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #5696a0;
}
.words span:nth-child(6){ 
    -webkit-animation-delay: 15s;
	-moz-animation-delay: 15s; 
	-o-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
	color: #6cabb5;
}
@-webkit-keyframes rotateWord{
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord{
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
	5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
	20% { opacity: 0; -moz-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord{
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
	5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
	20% { opacity: 0; -o-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord{
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
	5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
	20% { opacity: 0; -ms-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord{
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
	5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
	20% { opacity: 0; transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar): search and newsletter widget #HTML1 and #HTML6
------------------------------------------------------------------------------------ */
.form-place{
	float:left;
	width:100%;
	margin-bottom:60px;
}
.form-wrap{
	float:left;
	width:96%;/*total 74% */
	background:url(images/pat.png) rgba(221,221,221,0.3);
	background-repeat:repeat;
	padding:2%;
	border-radius:4px;
	border:1px solid rgba(255,255,255,0.8);
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
}
.form-wrap form{
	float:left;
	width:100%;
	clear:both;
}
.form-wrap input{
    float:left;
    width:54%;/*total 58%*/	
	background:#1f1f1f;
	border:1px solid #111;
	padding:2%;
	color:#fff;
	border-radius:4px;
	font-weight:700;
}
#searchsubmit, #buttonsubmit{
	float:right;
	width:40%;
	background: #6cabb5;
	border:1px solid #fff;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
	text-transform:uppercase;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	cursor:pointer;
}
#searchsubmit:hover, #buttonsubmit:hover{
	background:#3c8a95;
	color:#fff;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
.form-wrap::-webkit-input-placeholder{ 
	color:#fff; 
	font-weight:700;
}
.form-wrap input:-moz-placeholder{ 
	color:#fff; 
	font-weight:700;
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar): list of videos widget #HTML5
------------------------------------------------------------------------------------ */
.video{
	float:left;
	width:100%;
	margin-bottom:60px;
}
.video ul{
	float:left;
	width:100%;
	list-style:none;
}
.video li{
	float:left;
	width:32%;
	margin:0 2% 2% 0;
}
.video li.last{
	margin-right:0;
}
.video figure{
	float:left;
	width:100%;
	border:1px solid rgba(221,221,221,0.7);
	background:#f0f0f0;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
}
.video .figure-inner{
	float:left;
	border:1px solid #fff;
	padding:6%;
	width:88%;
}
.video figcaption{
	float:left;
	width:100%;
	margin:8% 0 0 0;
	background: url(images/camera.png);
	background-repeat:no-repeat;
	background-position: top right;
}
.video figcaption a{
	line-height:20px;
	padding-right:34px;
	display:inline-block;
	text-transform:capitalize;
}
.video-holder{
	float:left;
	width:100%;
	background:black;
}
.video-container {
	position: relative;
	padding-bottom: 70%;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*-------------view more button---------------------*/
.more{
	float:right;
	padding:10px;
	background:#6db5bf;
	color:#f0f0f0;
	font-weight:700;
	border:2px solid #fff; 
	box-shadow:0 1px 1px rgba(221,221,221,0.8);
	margin:10px 0 0 0;
	text-transform:lowercase;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
}
.more:hover{
	background:#3c8a95;
	color:#fff;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
/* ------------------------------------------------------------------------------------
--  MAIN CONTENT: right side (sidebar): tags widget #Label1
------------------------------------------------------------------------------------ */
#Label1{
	float:left;
	width:100%;
	margin-bottom:60px;	
}
#Label1 li{
	float:left;
	display:inline;
	margin:0 10px 10px 0;
	background:#f0f0f0;
	border:1px solid rgba(221,221,221,0.7);
	box-shadow:0 1px 1px rgba(221,221,221,0.9);	
}
#Label1 li span, #Label1 li a{
	float:left;
	display:inline;
	padding:10px;
	border:1px solid #fff;
	background:rgba(255,255,255,0.6);
	text-align:center;
}
#Label1 li:hover{
	background:#3c8a95;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/		
}
/* ------------------------------------------------------------------------------------
--  FOOTER
------------------------------------------------------------------------------------ */
footer{
	float:left;
	width:100%;
	border-bottom:4px solid #171717;
	margin-bottom:40px;
}
#footercontent{
	float:left;
	width:100%;
}
a.arrowup{
	float:right;
	background:#171717;
	width:26px;
	height:26px;
	color:#bbe9ef;
	text-align:center;
	line-height:24px;
	font-weight:bold;
	font-size:1.2em;
}
footer small{
	float:left;
	font-size:0.8em;
	color:#808080;
	text-shadow: 0 1px 1px #fff;
	margin-right:4%;
}
/* ------------------------------------------------------------------------------------
--  STATIC PAGES: ABOUT PAGE
------------------------------------------------------------------------------------ */
section.about{
	-webkit-column-count:2;
    -moz-column-count:2;
    -o-column-count:2;
    -ms-column-count:2;
    -webkit-column-count:2;
    -webkit-column-gap:40px; /* Safari and Chrome */
    -moz-column-gap:40px; /* Firefox */
    -o-column-gap:40px; /*Opera */
    -ms-column-gap:40px; /* IE */
    column-gap:40px;
    margin-bottom:60px;
}
.team{
	clear:both;
	margin-bottom:40px;
}
.team figure{
	width:40%;
	margin-right:4%;
}
.social{
	float:left;
}
.teamers{
	float:right;
	width:55.5%;
}
.teamers h2{
	color:#555;
	text-shadow:0 1px 1px #fff;
	line-height:1.5em;
	font-size:1.4em;
	text-transform:capitalize;	
	width:100%;
	padding-bottom:3%;
	border-bottom:1px solid rgba(221,221,221,0.7);
}
.teamers a{
	display:block;
	float:left;
	width:32px;
	height:32px;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-khtml-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	margin-right:10px;
}
.teamers p{
	font-size:1em;
}
/* ------------------------------------------------------------------------------------
--  STATIC PAGES: GALLERY PAGE
------------------------------------------------------------------------------------ */
.gallery-wrap{
	float:left;
    width:100%;
}
.gallery-block{
	float:left;
	width:100%;
	margin-bottom:80px;
}
.last{
	margin-bottom:0;
}
.gallery-block h1{
	float:left;
	width:100%;
	font-size:1.6em;	
	line-height:1.4em;
	color:#808080;
    text-transform:capitalize;
	line-height:1.5em;
	text-shadow:0 1px 1px #fff;	
}
/*you can delete this block if you use only one of two galleries: either video gallery or image gallery*/
.gallery-wrap ul{
	float:left;
	width:100%;
	list-style:none;
}
.gallery-wrap li{
	float:left;
	margin:0 2% 2% 0;
	width:32%;
}
.gallery-wrap li:last-child{
	margin-right:0;
}
.gallery-wrap ul.last-row li{
	margin-bottom:0;
}
.gallery-wrap figure{
	margin-bottom:0;
}
.gallery-wrap .figure-inner{
	float:left;
	border:1px solid #fff;
	padding:6%;
	width:88%;
}
.gallery-wrap figcaption{
	float:left;
	width:100%;
	margin:8% 0 0 0;
}
.gallery-wrap figcaption a{
	line-height:20px;
	padding-right:34px;
	display:inline-block;
	text-transform:capitalize;
}
.gallery-wrap figcaption.camera{
	background: url(images/camera.png);
	background-repeat:no-repeat;
	background-position: top right;	
}
.gallery-wrap figcaption.image{
	background: url(images/look.png);
	background-repeat:no-repeat;
	background-position: top right;	
}
.gallery-wrap img{
	cursor:pointer;
}
/* ------------------------------------------------------------------------------------
--  STATIC PAGES: CONTACT PAGE
------------------------------------------------------------------------------------ */
.contact-wrap{
	float:left;
    width:100%;
}
.contact-wrap h1{
	float:left;
	width:100%;
	font-size:1.6em;	
	line-height:1.4em;
	color:#808080;
    text-transform:capitalize;
	line-height:1.5em;
	text-shadow:0 1px 1px #fff;	
}
/* ------------------------------------------------------------------------------------
--  CONTACT PAGE: form
------------------------------------------------------------------------------------ */
#forma{
	float:left;
	width:100%;
	border-top:1px solid rgba(221,221,221,0.7);
	border-right:2px solid rgba(221,221,221,0.7);
	border-bottom:1px solid rgba(221,221,221,0.7);
	border-left:1px solid rgba(221,221,221,0.7);
	background:#f3f3f3;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
	margin-bottom:80px;
}
#forma form{
	float:left;
	padding:4%;
	border:1px solid #fff;
	float:left;
	width:92%;
}
#forma label{
	float:left;
	width:100%;
	margin-bottom:10px;
	color:#808080;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
    font-size:1.1em;
}
.ss-required-asterisk{
    color:#f83902;
    margin-left:5px;	
}
.input-wrap{
	float:left;
	width:100%;
	background:#f0f0f0;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);	
	margin-bottom:30px;
}
#forma input, #forma textarea{
	float:left;
	width:95.9%;
	padding:2%;
	border:1px solid rgba(255,255,255,0.8);
	background:#f0f0f0 url(images/pat.png);
    box-shadow:1px 1px 1px rgba(0,0,0,0.1) inset;
    font-size:0.9em;
}
#forma input:hover{
	outline:none;
	background:rgba(108,171,181,0.3);
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/		
}
#forma::-webkit-input-placeholder{ 
	color:#555; 
	font-weight:700;
}
#forma input:-moz-placeholder{ 
	color:#555; 
	font-weight:700;
}
fieldset#send{
	float:right;
	width:20%;
	padding:1%;
	border-radius:4px;
	background:#f0f0f0 url(images/pat.png);
    box-shadow:1px 1px 1px rgba(0,0,0,0.1) inset;
}
fieldset#send:hover{
	background:url(images/pat.png) rgba(221,221,221,0.3);
	background-repeat:repeat;
}
#forma #buttonsend{
	float:left;
	width:99.5%;
	border-radius:4px;
	padding:8% 0;
	text-align:center;
	background:#3c8a95;
	border:1px solid #fff;
	box-shadow:0 1px 1px rgba(221,221,221,0.9);
	text-transform:uppercase;
	color:#fff;
	font-family:'Varela Round', Helvetica, Arial, FreeSans, sans-serif;
	cursor:pointer;
}
#forma #buttonsend:hover{
	background: #6cabb5;
	color:#fff;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
/* ------------------------------------------------------------------------------------
--  CONTACT PAGE: social
------------------------------------------------------------------------------------ */
.contact-wrap ul{
	float:left;
	width:100%;
	list-style:none;
	margin:40px 0 0 0;
}
.contact-wrap li{
	float:left;
	margin-right:10px;
}
.contact-wrap li:last-child{
	margin-right:0;
}
.contact-wrap li a{
	display:block;
	float:left;
	width:32px;
	height:32px;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-khtml-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
/* ------------------------------------------------------------------------------------
--  SOCIAL ICONS
------------------------------------------------------------------------------------ */
a.facebook{
	background:url(images/facebook.png) no-repeat  0 0;
}
a.facebook:hover{
	background: url(images/facebook.png) 0 -32px;
	background-repeat:no-repeat;
	height:32px;	
}
a.amazon{
	background:url(images/amazon.png) no-repeat  0 0;
}
a.amazon:hover{
	background: url(images/amazon.png) 0 -32px;
	background-repeat:no-repeat;
	height:32px;	
}
a.vimeo{
	background:url(images/vimeo.png) no-repeat  0 0;
}
a.vimeo:hover{
	background: url(images/vimeo.png) 0 -32px;
	background-repeat:no-repeat;
	height:32px;	
}
a.flickr{
	background:url(images/flickr.png) no-repeat  0 0;
}
a.flickr:hover{
	background: url(images/flickr.png) 0 -32px;
	background-repeat:no-repeat;
	height:32px;	
}